<template>
  <el-config-provider :locale="zhCn">
    <el-table
      :data="mapStore.tableData"
      style="width: 100%"
      border
      class="el-table-custom"
      :default-sort="{ prop: mapStore.orderBy, order: mapStore.sort }"
      v-loading="mapStore.loading"
      element-loading-text="加载中..."
      element-loading-background="rgba(122, 122, 122, 0.8)"
      @sort-change="handleSort"
    >
      <el-table-column label="序号" min-width="5%">
        <template #default="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        min-width="10%"
        sortable="custom"
      />
      <el-table-column
        prop="IDNumber"
        label="身份证"
        min-width="18%"
        sortable="custom"
      />
      <el-table-column prop="photo" label="相片" min-width="10%">
        <template #default="scope">
          <el-button
            type="primary"
            link
            @click="console.log('object');"
            >点击查看</el-button
          >
        </template>
      </el-table-column>
      <el-table-column prop="sex" label="性别" min-width="7%" />
      <el-table-column
        prop="licensePlateNumber"
        label="车牌号"
        min-width="13%"
        sortable="custom"
      />
      <el-table-column
        prop="phone"
        label="手机号"
        min-width="10%"
        sortable="custom"
      />
      <el-table-column
        prop="address"
        label="居住地址"
        min-width="15%"
        sortable="custom"
      />
      <el-table-column label="操作" min-width="12%">
        <template #default="scope">
          <el-button
            type="primary"
            link
            :icon="Edit"
            @click="handleEdit(scope.row)"
            >编辑</el-button
          >
          <el-button
            type="primary"
            link
            :icon="Delete"
            @click="handleDelete(scope.name)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <div class="space-15"></div>

    <div class="el-pagination-wrapper">
      <el-pagination
        v-model:currentPage="mapStore.currentPage"
        v-model:page-size="mapStore.pageSize"
        :page-sizes="[5, 10, 20, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="mapStore.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-config-provider>
</template>

<script setup>
import { ref, onMounted } from "vue";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import { ElMessage, ElMessageBox } from "element-plus";
import { Edit, Delete } from "@element-plus/icons-vue";
import { getAjaxTableData } from "@/api/getAjaxData.js";
import pinia from "@/store/pinia";
import { useMapStore } from "@/store/map";
const mapStore = useMapStore(pinia);

const handleSizeChange = (val) => {
  mapStore.pageSize = val;
  getAjaxTableData(
    mapStore.currentPage,
    mapStore.pageSize,
    mapStore.orderBy,
    mapStore.sort,
    {}
  );
};

const handleCurrentChange = (val) => {
  mapStore.currentPage = val;
  getAjaxTableData(
    mapStore.currentPage,
    mapStore.pageSize,
    mapStore.orderBy,
    mapStore.sort,
    {}
  );
};

const handleSort = (data) => {
  mapStore.orderBy = data.prop;
  mapStore.sort = data.order;
  getAjaxTableData(
    mapStore.currentPage,
    mapStore.pageSize,
    mapStore.orderBy,
    mapStore.sort,
    {}
  );
};

const handleEdit = (row) => {
  for (const prop in mapStore.ruleAddForm) {
    if (mapStore.ruleAddForm.hasOwnProperty(prop)) {
      mapStore.ruleAddForm[prop] = row[prop];
    }
  }
  mapStore.openType = "edit";
  mapStore.addDialogVisible = true;
};

const handleDelete = (name) => {
  ElMessageBox.confirm("确定删除此信息吗?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {})
    .catch(() => {});
};

onMounted(() => {
  getAjaxTableData(
    mapStore.currentPage,
    mapStore.pageSize,
    mapStore.orderBy,
    mapStore.sort,
    {}
  );
});
</script>

<style scoped>
@import url("@/assets/main.css");

.el-table {
  --el-table-border-color: rgba(255, 255, 255, 0.1);
  /* --el-table-border: none; */
  --el-table-text-color: #bdbdbe;
  --el-table-header-text-color: #bdbdbe;
  --el-table-row-hover-bg-color: transparent;
  --el-table-current-row-bg-color: transparent;
  --el-table-header-bg-color: transparent;
  --el-table-bg-color: transparent;
  --el-table-tr-bg-color: transparent;
  --el-table-expanded-cell-bg-color: transparent;
}

.el-table-custom {
  height: calc(100% - 90px);
}

.el-table-custom /deep/ .el-table__row {
  cursor: default !important;
}

.el-table-custom /deep/ th {
  padding: 0;
}

.el-table-custom /deep/ th .cell {
  padding-top: 8px;
  padding-bottom: 8px;
  font-weight: bold !important;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0),
    rgba(94, 182, 255, 0.35),
    rgba(255, 255, 255, 0)
  );

  color: rgba(255, 255, 255, 1);
  text-shadow: 1px 1px 1px #000;
  text-align: left;
  font-size: 15px;
  font-weight: bold;
}

.el-table-custom /deep/ .el-table__body tr:nth-child(odd) {
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0),
    rgba(94, 182, 255, 0.25),
    rgba(255, 255, 255, 0)
  );
}

.el-table-custom /deep/ .el-table__body tr:nth-child(even) {
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0),
    rgba(94, 182, 255, 0.35),
    rgba(255, 255, 255, 0)
  );
}

.el-table-custom /deep/ .el-table__body td {
  color: rgba(255, 255, 255, 1);
  text-shadow: 1px 1px 1px #000;
  word-break: break-all;
  word-wrap: break-word;
  overflow-wrap: break-word;
  font-size: 14px;
}

.el-pagination-wrapper /deep/ .el-pager li {
  border-radius: 0 !important;
}

.el-pagination-wrapper /deep/ .el-pagination .btn-prev {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.el-pagination-wrapper /deep/ .el-pagination .btn-next {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.el-pagination-wrapper /deep/ .el-pagination__jump {
  color: rgba(200, 200, 200, 1)!important;
  text-shadow: 1px 1px 1px #000!important;
}

.el-button--primary {
  --el-button-bg-color: rgba(0, 155, 223, 1) !important;
  color: rgba(255, 255, 255, 1);
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
  text-decoration: underline;
}
</style>
